import Taro, { useAddToFavorites, useShareAppMessage, useShareTimeline, useTabItemTap } from '@tarojs/taro'
import React, { useState, useCallback, useEffect, } from 'react'
import { View } from '@tarojs/components'
import { useSelector, useDispatch } from 'react-redux'
import i18n from '@I18N'
import List from '@COMPONENTS/List'
import ListWeb from '@COMPONENTS/List/ListWeb'
import HomeBanner from '@COMPONENTS/Banner/HomeBanner'
import ExpertBanner from '@COMPONENTS/Banner/ExpertBanner'
import PopularSearchBar from '@COMPONENTS/Search/PopularSearchBar'
import ExpertPlanList from '@COMPONENTS/PlanManagement/ExpertPlanList'
import shareManage from '@UTILS/shareManage'
import withWebLogin from '@HOC/withWebLogin'
import { Analytic_Type } from '@CONSTANTS/analytic'
import { ROUTER_SCENE_TITLE, SHARE_TYPE } from '@CONSTANTS/app'
import authActions from '@ACTIONS/auth'
import expertActions from '@ACTIONS/expert'
import { ProfileStateITF } from '@REDUXITF/profile'
import { RootStateITF } from '@REDUXITF/index'
import { ExpertStateITF } from '@REDUXITF/expert'
import { AuthStateITF } from '@REDUXITF/auth'
import { handleClickTab } from '@UTILS/common'
import { RouteSceneKey } from '@NAVIGATION/scenes'
import style from './index.module.scss'

const BaseList = process.env.TARO_ENV === 'h5' ? ListWeb : List

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const ishnapp = global.IS_HN_APP
interface Props {
  showLogin: () => void,
}

const Index: React.FC<Props> = ({ showLogin }) => {
  const dispatch = useDispatch()
  const { user } = useSelector<RootStateITF, ProfileStateITF>(state => state.profile)
  const userId = user?.p8Id
  const { isDisabledConsultation } = useSelector<RootStateITF, AuthStateITF>(state => state.auth)
  const {
    homeBanner, popularSearch,
  } = useSelector<RootStateITF, ExpertStateITF>(state => state.expert)
  const [refreshing, setRefreshing] = useState<boolean>(false)

  const { dispatchCheckStatus } = authActions
  const checkStatus = useCallback(() => dispatch(dispatchCheckStatus()), [dispatch, dispatchCheckStatus])
  const {
    dispatchGetExpertBanner, dispatchGetExpertSpecialTopic, dispatchGetPopularSearch
  } = expertActions

  const getExpertBanner = useCallback(() => dispatch(dispatchGetExpertBanner()), [dispatch, dispatchGetExpertBanner])
  const getExpertSpecialTopic = useCallback(() => dispatch(dispatchGetExpertSpecialTopic()), [dispatch, dispatchGetExpertSpecialTopic])
  const getPopularSearch = useCallback(() => dispatch(dispatchGetPopularSearch()), [dispatch, dispatchGetPopularSearch])

  const fetchData = useCallback(() => {
    getExpertBanner()
    getExpertSpecialTopic()
    getPopularSearch()
  }, [getExpertBanner, getExpertSpecialTopic, getPopularSearch])

  useEffect(() => {
    checkStatus()
    if (!userId) return
    fetchData()
  }, [checkStatus, fetchData, userId])

  const onRefresh = useCallback(() => {
    setRefreshing(true)
    fetchData()
    setTimeout(() => setRefreshing(false), 1000)
  }, [fetchData])

  useTabItemTap(item => {
    handleClickTab(`/${item.pagePath}`)
  })
  useShareAppMessage(() => {
    Taro.tracker.trackEvent(Analytic_Type.tap_wmp_share.eventId,
      { SceneTitle: ROUTER_SCENE_TITLE.expertPage, ShareType: SHARE_TYPE.WeChatFriend }, { Scene: RouteSceneKey.expertPage })
    return shareManage.onShareAppMessage.expertPage(i18n.share.expert_title(), user)
  })
  useShareTimeline(() => {
    Taro.tracker.trackEvent(Analytic_Type.tap_wmp_share.eventId,
      { SceneTitle: ROUTER_SCENE_TITLE.expertPage, ShareType: SHARE_TYPE.WeChatMoment }, { Scene: RouteSceneKey.expertPage })
    return shareManage.onShareTimeline.expertPage(i18n.share.expert_title(), user)
  })
  useAddToFavorites(() => shareManage.onShareTimeline.expertPage(i18n.share.expert_title(), user))

  const isShowBanner = homeBanner?.length > 0

  return (
    <View className={style.container}>
      <BaseList
        onRefresh={onRefresh}
        refreshing={refreshing}
        refresherBackground="#F7F7F7"
        refresherDefaultStyle="black"
        backgroundColor="transparent"
      >
        <View className={style.listContent}>
          {!ishnapp && !isDisabledConsultation && (
            <View className={style.barContainer}>
              <PopularSearchBar data={popularSearch} containerClass={style.containerClass} />
            </View>
          )}
          <View className={style.main}>
            { !isDisabledConsultation && <ExpertBanner showLogin={showLogin} />}
            { isShowBanner && (<HomeBanner data={homeBanner} />)}
            <ExpertPlanList refreshing={refreshing} isShowBanner={isShowBanner} />
            <View className={style.emptyLine} />
          </View>
        </View>
      </BaseList>
    </View>

  )
}

export default withWebLogin(Index)
